<script setup lang="ts">
import { exportObeject, copyObeject } from '@/objects/ObjectUtils'
import { useStage } from '../store/stage';
import { useSystem } from '@/store/sys';
import { SvgObject } from '@/objects/StageObject';
import { VscodeTools } from '@/vscode';
const { showMessage } = useSystem()
const { data } = useStage()
function copySvg() {
    copyObeject(data.elements as SvgObject);
    showMessage('已复制到剪切板');
}
function exportSvg() {
    exportObeject(data.elements as SvgObject);
    showMessage('生成文件成功');
}

function inVscode() {
    return import.meta.env.MODE === 'vscode';
}

function newFile() {
    VscodeTools.newFile();
}

function saveFile() {
    VscodeTools.saveFile(data.elements);
}

async function readSvg() {
    try {
        const txt = await VscodeTools.readClipBoard();
        if (inVscode()) {
            VscodeTools.saveTextFile(txt);
        }
        VscodeTools.setContent(txt);
    } catch (error) {
        showMessage('粘贴失败');
    }
}
</script>
<template>
    <div class="tools-box contr">
        <strong>
            svg 编辑器
        </strong>
        <div class="btns">
            <button v-show="inVscode()" @click="newFile" title="新建文件">
                新建
            </button>
            <button v-show="inVscode()" :class="{ 'need-save': data.needSave }" @click="saveFile" title="保存到文件">
                保存
            </button>
            <button @click="copySvg" title="将编辑器内容复制到剪贴板">
                复制
            </button>
            <button @click="readSvg" title="将剪贴板内容粘贴到编辑器">
                粘贴
            </button>
            <button v-show="!inVscode()" @click="exportSvg">
                导出
            </button>
        </div>
    </div>
</template>
<style lang="css" scoped>
.tools-box {
    background-color: #242424;
    border-radius: 0.3rem;
    padding: 0.5rem;
    margin-bottom: 0.1rem;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
}

.tools-box button {
    background: none;
    outline: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0;
    color: #fff;
    font-size: 0.85rem;
}

.tools-box>button:hover {
    background: #3d3d3d;
    outline: none;
}

.need-save {
    position: relative;
}

.need-save::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0.6rem;
    height: 0.6rem;
    background: #fd3e3e;
    border-radius: 50%;
    z-index: 100;
}
</style>